Skip to content

fix: Configure Tailwind v4 dark mode with class strategy#75

Merged
raifdmueller merged 1 commit intoLLM-Coding:mainfrom
raifdmueller:main
Feb 13, 2026
Merged

fix: Configure Tailwind v4 dark mode with class strategy#75
raifdmueller merged 1 commit intoLLM-Coding:mainfrom
raifdmueller:main

Conversation

@raifdmueller
Copy link
Contributor

Summary

Fixes dark mode not working properly due to incorrect Tailwind v4 configuration.

Problem

Tailwind v4 with @tailwindcss/vite plugin doesn't use tailwind.config.js. The previous fix added a config file that was completely ignored, causing dark mode to use media queries instead of the .dark class.

Solution

  • Add @variant dark (.dark &) directive in CSS (Tailwind v4 way)
  • Remove unused tailwind.config.js (not read by Tailwind v4)
  • Dark mode now correctly uses .dark class on <html> element

Testing

  • Built locally and verified dark mode variants use .dark class
  • Category headings now visible in dark mode

Impact

Critical fix - makes dark mode actually work as intended.

🤖 Generated with Claude Code

Tailwind v4 with @tailwindcss/vite plugin doesn't use tailwind.config.js.
Instead, use @variant directive in CSS to configure class-based dark mode.

- Add @variant dark (.dark &) to main.css
- Remove unused tailwind.config.js (not used in Tailwind v4)
- Fixes dark mode variants to use .dark class instead of media query

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
@raifdmueller raifdmueller merged commit 49b6e6b into LLM-Coding:main Feb 13, 2026
1 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant